<template>
	<nt-container v-model="scrollHeight">
		<view class="ranking">
			<view class="ranking-header">
				<image class="ranking-header__img" src="/static/image/ranking_04.png"></image>
				<view class="ranking-header__content">
					<view class="title">奖金 = 城市奖金池城市总积分</view>
					<view class="subtitle">个人积分如积分有变动，会有1-2分钟延时更新</view>
				</view>
			</view>
			<view class="ranking-body">
				<view class="ranking-body__overview">
					<text v-for="(it, index) in commonForm.countList" :key="index">{{it.name}}：{{it.value}}</text>
				</view>
				
				<view class="ranking-content" :style="{height: `${scrollHeight - 200}px`}">
						<!-- refresherEnabled -->
					<nt-table 
						:columns="commonForm.columns" 
						:table-data="commonForm.tableData"
						v-model="commonForm.loading"
						:finished="commonForm.finished"
						@scrolltolower="getCommonFormList"
						@refresherrefresh="formInit"
					></nt-table>
				</view>
			</view>
		</view>
	</nt-container>
</template>

<script>
import dayjs from "dayjs"
import { getFormInit, getFormList } from "@/api"
import FormMixins from "@/mixins/formMixins"
export default {
	mixins: [FormMixins],
	data(){
		return {
			commonFormFuntype: "RankingIntegral",
			scrollHeight: 0,
		}
	},
	onLoad(options){
		this.formInit()
	},
	methods: {
	}
}
</script>

<style lang="scss" scoped>
.ranking{
	&-header{
		background: #9AC4E6;
		background-image: url("/static/image/ranking_02.png");
		background-position: left 0;
		background-size: 100%;
		background-repeat: no-repeat;
		height: 310rpx;
		padding: 20rpx 20rpx 0;
		box-sizing: border-box;
		color: #fff;
		&__img{
			width: 374rpx;
			height: 84rpx;
			margin-bottom: 10rpx;
		}
		&__content{
			max-width: 70%;
			.title{
				font-size: 32rpx;
			}
			.subtitle{
				font-size: 26rpx;
				margin-top: 5rpx;
			}
		}
	}
	&-body{
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		background: var(--theme-color);
		margin-top: -60rpx;
		&__overview{
			padding: 0 20rpx;
			box-sizing: border-box;
			display:flex;
			align-items: center;
			justify-content: space-between;
			color:#fff;
			font-size: 28rpx;
			height: 90rpx;
		}
	}
	&-content{
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		padding: 30rpx 20rpx;
		box-sizing: border-box;
		background:#fff;
		&__header{
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			color:#666;
			font-weight: bold;
			background: #FAFAFA;
		}
		&__item{
			display:flex;
			justify-content: space-between;
			align-items: center;
			height: 90rpx;
			border-top: 1rpx solid #f5f5f5;
		}
		&__cell{
			flex: 1;
			color:#333;
			font-size: 24rpx;
			text-align: center;
			&.title{
				font-size: 30rpx;
				color:#666;
			}
			&.number{
				width: 10rpx !important;
			}
			
		}
	}
}
</style>